<template>
  <div class="withdrawals-record">
    <div class="cashbox">
      <div class="cash-detail">
        <div
          class="IntegralDetail detailItem"
          id="J-listuser"
          style="border-radius: 10px;"
        >
          <!--提现明细-->
          <div class="listuser-con">
            <van-list
              v-show="items.length"
              v-model="loading"
              :immediate-check="true"
              :finished="finished"
              :error.sync="error"
              error-text="请求失败，点击重新加载"
              finished-text=""
              @load="onLoad"
            >
              <ul>
                <li class="supplier_widthdraw_detail" v-for="(item, index) in items" :key="index">
                  <div class="flx-title">
                    <p class="title">{{ item.create_time }}</p>
                    <p class="status">
                      <span class="green">到账</span>
                    </p>
                  </div>
                  <div class="flx">
                    <p class="w50">
                      <span>申请金额：</span>
                      {{ item.apply_money }}
                    </p>
                    <p class="w50">
                      <span>积分到账：</span>
                      {{ item.point_money }}
                    </p>
                    <p class="w50">
                      <span>余额到账：</span>
                      {{ item.balance_money }}
                    </p>
                    <p class="w50">
                      <span>手续费：</span>
                      {{ item.fee_money }}
                    </p>
                  </div>
                </li>
              </ul>
            </van-list>
            <div v-show="!items.length">
              <no-data :noData=noData></no-data>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import noData from '@/components/noData/index'
import Vue from 'vue'
import { List } from 'vant'
import { commissionToPointRecord } from '@/api/dz/dzBrokerageToPoint'

Vue.use(List)
export default {
  components: {
    noData
  },
  data() {
    return {
      noData: {
        width: '49%',
        marginTop: '100px',
        txtMarginTop: '-30px',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_tx_log.png',
        text: '当前没有提现记录'
      },
      error: false,
      loading: false,
      finished: false,
      items: [],
      p: 1
    }
  },
  created() {
    this.onLoad()
  },
  mounted() {
    // TODO 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },
  methods: {
    onLoad() {
      this.loading = true
      this.finished = false
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      commissionToPointRecord({ p: this.p }).then(res => {
        this.$loadingWrap.close()
        this.loading = false
        if (res.status == 1) {
          if (res.data.length > 0) {
            const list = res.data
            this.items.push(...list)
            this.p++
            this.finished = false
          } else {
            this.finished = true
          }
        } else {
          this.finished = true
          this.error = true
          this.$Error(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.cashbox {
  .cash-detail {
    .IntegralDetail {
      .supplier_widthdraw_detail {
        width: 700px;
        position: relative;
        // padding: 20px;
        font-size: 28px;
        margin: 25px auto;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
        .record {
          padding: 10px 0 20px 30px;
          .record-content {
            display: inline-block;
            padding: 0 20px;
            font-size: 24px;
            line-height: 50px;
            border-radius: 25px;
          }
        }
        .flx-title{
          line-height: 90px;
          border-bottom: 1px solid #EDEDED;
          padding: 0 30px;
          overflow: hidden;
          p{
            &.title{
              float: left;
              font-size: 28px; 
              font-weight: bold;
            }
            &.status{
              float: right;
              .gray {
                color: #999;
              }
              .yellow {
                color: #FF8C01;
              }
              .green {
                color: #21e900;
              }
              .red {
                color: #F30C23;
              }
            }
          }
        }
        .flx {
          display: flex;
          justify-content: flex-start;
          flex-wrap:wrap;
          padding: 0 30px 20px;
          p {
          line-height: 60px;
          word-wrap: break-word;
          word-break: break-all;
          color: #666;
          font-size: 26px;
          &.w50{ 
            width: 50%;
          }
          span {
            margin-right: 16px;
            color: #333;
          }
        }
        }
      }
      .staticLoading {
        display: block;
        padding: 4px 0 10px;
        margin: 0 auto;
        color: #333;
        text-align: center;
        p {
          color: #666;
          padding: 10px;
          text-align: left;
          span {
            display: inline-block;
            color: #989898;
            padding: 10px 16px;
            font-weight: 500;
          }
        }
      }
    }
    .no-data {
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
  }
}
</style>
